<template>
  <div>
    <div>
      <!-------------------------------表格 ----------------------down ------------------->
      <el-card :body-style="{padding:'0px 8px'}" style="background-color: #f3f3f3">
        <!-------------------------------按钮 ----------------------down------------------->
        <div>
          <el-button class="hand-btn" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
          <el-input v-model="query.name" class="handle-input" placeholder="用户名称" />
          <el-button class="hand-btn" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </div>
        <!-------------------------------按钮 ----------------------up ------------------->
        <el-table
          ref="multipleTable"
          v-loading="loadingMTable"
          :data="page.content"
          border
          max-height="580"
          height="580"
          class="table"
          :cell-style="{'padding':'2px','font-size':'12px'}"
          :header-cell-style="{'padding':'0px','font-weight':'800'}"
          header-cell-class-name="table-header"
        >
          <el-table-column
            type="index"
            width="50"
          />
          <el-table-column prop="id" label="ID" sortable width="80" />
          <el-table-column prop="code" label="用户账号" sortable width="250px" />
          <el-table-column prop="username" label="用户名称" sortable width="250px" />
          <el-table-column prop="status" label="状态" />
          <el-table-column prop="departmentname" label="部门" />
          <el-table-column prop="createBy" label="创建人" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                type="text"
                icon="el-icon-delete"
                style="color:red"
                @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-card :body-style="{padding:'5px 20px'}">
          <el-pagination
            background
            layout="total,sizes, prev, pager, next"
            :page-sizes="[10,20, 30, 40, 50]"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :total="page.totalElements"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
          />
        </el-card>
      </el-card>
      <!-------------------------------表格 ----------------------up ------------------->
      <!----------------------------------form 表单------------------down----------- -->
      <el-dialog :visible.sync="editVisible" :body-style="{padding:'0px 8px'}" style="background-color: #f3f3f3;">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" style="min-height: 500px;">
          <el-form-item label="用户账号" prop="code">
            <el-input v-model="form.code" />
          </el-form-item>
          <el-form-item label="用户名称" prop="username">
            <el-input v-model="form.username" />
          </el-form-item>
          <el-form-item label="用户密码" prop="password">
            <el-input v-model="form.password" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-switch
              v-model="form.status"
              active-color="#13ce66"
              active-value="开启"
              inactive-value="关闭"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="部门">
            <el-select v-model="form.departmentName" placeholder="请选择">
              <el-option
                v-for="item in departments"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <!--<el-form-item label="菜单">
            <el-checkbox-group v-model="checkedMenus" @change="handleCheckMenus">
              <el-checkbox v-for="menu in menus" :key="menu.name" :label="menu.name">{{ menu.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>-->
        </el-form>
        <div style="text-align:right">
          <el-button class="hand-btn" type="info" @click="editVisible = !editVisible">取消</el-button>
          <el-button class="hand-btn" type="success" :loading="loadingSave" @click="saveEdit">保存</el-button>
        </div>
      </el-dialog>
      <!-------------------------------form表单----------------------up ------------------->
    </div>
  </div>
</template>
<script>import { save } from '@/api/baseUser'
import { query } from '@/api/baseUser'
import { list } from '@/api/baseMenu'
import { list as findAllDepartment } from '@/api/baseDepartment'
import { delbyid } from '@/api/baseUser'
export default {
  name: 'BaseUser',
  data() {
    return {
      rules: {
        code: [
          { required: true, message: '账号不能为空' }
        ],
        name: [
          { required: true, message: '名称不能为空' }
        ],
        path: [
          { required: true, message: '密码不能为空' }
        ]
      },
      editVisible: false,
      query: {
        pageIndex: 1,
        pageSize: 20,
        name: ''
      },
      menus: [],
      checkedMenus: [],
      page: {},
      form: {},
      departments: [],
      loadingMTable: false,
      loadingSave: false
    }
  },
  created() {
    this.getData()
    this.getMenus()
    this.findAllDepartment()
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getMenus() {
      list().then(res => {
        this.menus = res.data.list
      })
    },
    findAllDepartment() {
      findAllDepartment().then(res => {
        this.departments = res.data.list
      })
    },
    getData() {
      this.loadingMTable = true
      query(this.query).then(res => {
        this.loadingMTable = false
        this.page = res.data.page
      })
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, 'pageIndex', 1)
      this.getData()
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      }).then(() => {
        delbyid(row.id).then(res => {
          this.$message.success('删除成功')
          this.getData()
        })
      })
        .catch(() => {
        })
    },
    // 全选
    handleCheckAllChange(val) {
      this.checkedMenus = val ? this.menus : []
    },
    // 多选操作
    handleCheckMenus(val) {
      this.form.menus = []
      console.log(this.checkedMenus)
      for (const ent of this.checkedMenus) {
        for (const m of this.menus) {
          if (ent === m.name) {
            this.form.menus.push(m)
            break
          }
        }
      }
    },
    delAllSelection() {
      const length = this.multipleSelection.length
      let str = ''
      this.delList = this.delList.concat(this.multipleSelection)
      for (let i = 0; i < length; i++) {
        str += this.multipleSelection[i].name + ' '
      }
      this.$message.error(`删除了${str}`)
      this.multipleSelection = []
    },
    // 编辑操作
    handleEdit(index, row) {
      this.form = row
      this.checkedMenus = []
      for (const m of row.menus) {
        this.checkedMenus.push(m.name)
      }
      this.editVisible = true
    },
    // 保存编辑
    saveEdit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loadingSave = true
          save(this.form).then(res => {
            this.loadingSave = false
            this.$message.success(res.message)
            this.editVisible = false
            this.getData()
          })
        } else {
          this.$message.warning('信息未填写完整')
        }
      })
    },
    add() {
      this.form = {}
      this.editVisible = true
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.$set(this.query, 'pageSize', val)
      this.getData()
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val)
      this.getData()
    }
  }
}
</script>

<style scoped>
  .handle-box {
    margin: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    margin: 10px;
    width: 300px;
    display: inline-block;
  }
  .hand-btn {
    margin: 5px;
  }
  .table-header{
    padding: 0px;
  }
</style>
